<template>
  <div>
    <!-- 1.使用顶部导航组件 -->
    <nav-comp :back="false" title="首页"></nav-comp>
    <!-- 2.搜索区域 -->
    <van-search
      v-model="keywords"
      shape="round"
      background="orangered"
      placeholder="请输入搜索关键词"
    />
    <!-- 3.一级分类导航区域 -->
    <van-tabs @click="goList">
      <van-tab
        v-for="item in cateData"
        :title="item.catename"
        :key="item.id"
      ></van-tab>
    </van-tabs>
    <!-- 4.商品活动区域  轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerData" :key="item.id">
        <img :src="$pre + item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 5.商品秒杀 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
      </van-grid-item>
    </van-grid>
    <!-- 6.获取商品推荐列表数据 -->
    <van-tabs type="card" @click="changeHotData">
      <van-tab 
        v-for="(item,index) in hotText"
        :key="index"
        :title="item.title"
      >
        <!-- 推荐商品列表数据区域 -->
        <van-card
            v-for="item in hotData[hotIndex]?hotData[hotIndex].content : []"
            :key="item.id"
            :tag="hotText[hotIndex].title"
            :price="item.price"
            :title="item.goodsname"
            :thumb="$pre+item.img"
            :origin-price="item.market_price"
        />

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import Nav from "../../components/nav/Index.vue";
export default {
  // components: {
  //   Nav,
  // },
  data() {
    return {
      keywords: "", //搜索关键词
      cateData: [], //分类导航数据
      bannerData: [], //商品轮播图
      time: "", //倒计时 时间
      seckillData: {}, //秒杀商品数据
      hotText:[
        {title:"热门推荐"},
        {title:"上新推荐"},
        {title:"所有商品"}
      ],
      hotIndex:0,//默认推荐商品数据下标
      hotData:[],//推荐商品数据（热门 上新 所有）
      hotDefault:[],//推荐展示的默认数据
    };
  },
  mounted() {
    //3.获取一级分类导航数据
    this.getCate();
    //4.获取商品轮播图数据
    this.getBanner();
    //5.商品秒杀数据
    this.getSeckill();
    //6.获取商品推荐列表数据
    this.getHotData();
  },
  methods: {
    //3.获取一级分类导航数据
    getCate() {
      this.$api
        .reqCate()
        .then((res) => {
          this.cateData = res.data.list;
        })
        .catch((err) => console.log(err));
    },
    //4.获取商品轮播图数据
    getBanner() {
      this.$api
        .reqBanner()
        .then((res) => {
          this.bannerData = res.data.list;
        })
        .catch((err) => console.log(err));
    },
    //5.商品秒杀数据
    getSeckill() {
      this.$api
        .reqSeckill()
        .then((res) => {
          this.seckillData = res.data.list[0]; //获取一条展示即可
          this.time = this.seckillData.endtime - new Date().getTime();
        })
        .catch((err) => console.log(err));
    },
    //6.获取商品推荐列表数据
    getHotData(){
        this.$api.reqHot()
        .then(res=>{
            console.log(res)
            this.hotData =res.data.list
        })
        .catch(err=>console.log(err))
    },
    //7.切换推荐商品数据
    changeHotData(index){
        this.hotIndex = index
    },
    //8.跳转到商品列表页面
    goList(index){
        //延迟跳转商品列表
        setTimeout(() => {
            this.$router.push('/goodlist?type=1&cateid='+this.cateData[index].id)
        }, 500);
    }
  },
};
</script>

<style scoped>
/* 4.轮播图 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
}
.van-swipe-item img {
  width: 100%;
  height: 4rem;
}
/* 秒杀区域*/
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>
